<template>
	<view class="container">
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item,index) in list">
				<view class="swiper-item">
					<image :src="'../../static'+item.icon" mode="" style="width: 100%; height: 240px;"></image>
				</view>
			</swiper-item>
		</swiper>
		<uni-section title="菜品类别" sub-title="" type="square">
		<uni-grid :column="4">
			<uni-grid-item v-for="item,index in typelist">
				<view style="display: flex; flex-direction: column; align-items: center; padding-top: 10px;">
					<image :src="'../../static/'+item.icon" style="width: 100rpx; height: 100rpx; " mode=""></image>
					<view>{{item.typename}}</view>
				</view>
			</uni-grid-item>
		</uni-grid>
		</uni-section>
		<uni-section title="新闻列表" sub-title="" type="square">
			<view class="tab-container">
				<view class="tab-item" :class="{'tab-active':activeIndex==index}" @click="changeCategory"
				:data-index="index"
				v-for="(item,index) in categorylist">
					{{item.categoryname}}
				</view>
			</view>
			<swiper :indicator-dots="false" :autoplay="false" 
			@change="activeIndexChange"
			:current="activeIndex">
				<swiper-item v-for="category in categorylist">
					<uni-list>
						<uni-list-item :title="item.title" note=""
						v-for="(item,index) in newslist.filter(i=>i.type == category.categoryname)"></uni-list-item>
					</uni-list>
				</swiper-item>
			</swiper>
		</uni-section>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				newslist: [],
				categorylist: [],
				activeIndex: 1,
				"typelist": [{
						"id": 1,
						"typename": "鱼类",
						"icon": "/fish.png"
					},
					{
						"id": 2,
						"typename": "肉类",
						"icon": "/meat.png"
					},
					{
						"id": 3,
						"typename": "菌菇类",
						"icon": "/mashroom.png"
					},
					{
						"id": 4,
						"typename": "豆制品",
						"icon": "/bean.png"
					},
					{
						"id": 5,
						"typename": "蔬菜",
						"icon": "/vegitable.png"
					},
					{
						"id": 6,
						"typename": "酒水",
						"icon": "/drink.png"
					},
					{
						"id": 7,
						"typename": "火锅",
						"icon": "/hotpot.png"
					},

					{
						"id": 8,
						"typename": "水果",
						"icon": "/fruit.png"
					}
				],
				"list": [{
						"id": 1,
						"name": "烤鸭",
						"type": "肉类",
						"icon": "/1.png",
						"description": "烤鸭是北京和南京的一道特色名菜,属于北京菜或金陵菜,该菜品以色泽红艳,肉质细嫩,味道醇厚,肥而不腻的特色,被誉为“天下美味”而驰名中外,其色泽略黄,柔软淡香,夹卷其他荤素食物食用,为宴席常用菜点,更是家常风味美食。",
						"price": 88.5
					},
					{
						"id": 2,
						"name": "回锅肉",
						"type": "肉类",
						"icon": "/2.png",
						"description": "回锅肉，是一种四川传统菜式中家常（味型）菜肴的代表菜肴之一，属于川菜系列。制作原料主要有猪后臀肉（二刀肉）、青椒、蒜苗等，口味独特，色泽红亮，肥而不腻。回锅肉起源四川农村地区。古代时期称作油爆锅，四川地区大部分家庭都会制作。所谓回锅，就是再次烹调的意思。",
						"price": 12.5
					},
					{
						"id": 3,
						"name": "茄子",
						"type": "蔬菜",
						"icon": "/3.png",
						"description": "油淋茄子以茄子、鸡蛋、肉末、粉丝等为食材制成的一道精美的平民美食。",
						"price": 20.5
					},
					{
						"id": 4,
						"name": "宫保鸡丁",
						"type": "肉类",
						"icon": "/4.png",
						"description": "宫保鸡丁选用鸡肉为主料，佐以花生米、辣椒等辅料烹制而成；红而不辣、辣而不猛、香辣味浓、肉质滑脆；其入口鲜辣，鸡肉的鲜嫩可以配合花生的香脆。",
						"price": 34.5
					}
				]
			}

		},
		methods: {
			loadtype(){
				let options={
					url:'http://localhost:8090/foodapp/types/list',
					method:'POST',
					data:null
				}
				this.$httpRequest(options)
				.then(res=>{
					if(res.data.success){
						this.typelist = res.data.data
					}else{
						uni.showToast({
							title:'失败',
							icon:'none'
						});
					}
				})
				.catch(err=>{
					uni.showToast({
						title: '失败',
						icon:'none'
					});
				})
			},
		    loadtype1(){
				uni.request({
					url:'http://localhost:8090/foodapp/types/list',
					method:'POST',
					data:{},
					success:res=>{
						if(res.data.success){
							this.typelist = res.data.data
						}else{
							uni.showToast({
								title:'失败',
								icon:'none',
							});
						}
					},
					fail:(err)=>{
						uni.showToast({
							title:'失败',
							icon:'none'
						});
					},
					complete:()=>{}
				});
			},
			activeIndexChange(e) {
				console.log(e);
				this.activeIndex = e.detail.current
			},
			changeCategory(e) {
				this.activeIndex = e.currentTarget.dataset.index;
			},
		
		loadData() {
			uni.request({
					url: 'http://localhost:8090/foodapp/category/list',
					method: 'POST',
					data: {},
				}).then(data => {
					let [error, res] = data
					console.log(res);
					this.categorylist = res.data.data
					return uni.request({
						url: 'http://localhost:8090/foodapp/news/list',
						method: 'POST',
						data: {}
					});
				})
				.then(data => {
					let [error, res] = data
					this.newslist = res.data.data
				});
				}
		},
		onLoad() {
			this.loadData();
			this.loadtype();
		}
	}

</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	.tab-container {
			width: 100%;
			height: 80rpx;
			display: flex;
			flex-direction: row;
		}
	
		.tab-item {
			flex: 1;
			text-align: center;
			line-height: 80rpx;
		}
	
		.tab-item.tab-active {
			border-bottom: red solid 3px;
			background-color: #EEE;
		}
</style>
